<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Custom Basemap | Sample | ArcGIS API for JavaScript 4.17</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      href="https://js.arcgis.com/4.17/esri/themes/light/main.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="https://js.arcgis.com/4.17/"></script>

    <script>
      require([
        "esri/layers/WebTileLayer",
        "esri/Map",
        "esri/Basemap",
        "esri/widgets/BasemapToggle",
        "esri/views/SceneView"
      ], function (WebTileLayer, Map, Basemap, BasemapToggle, SceneView) {
        // Create a WebTileLayer with a third-party cached service
        var mapBaseLayer = new WebTileLayer({
          urlTemplate:
            "https://stamen-tiles-{subDomain}.a.ssl.fastly.net/terrain/{level}/{col}/{row}.png",
          subDomains: ["a", "b", "c", "d"],
          copyright:
            'Map tiles by <a href="http://stamen.com/">Stamen Design</a>, ' +
            'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
            'Data by <a href="http://openstreetmap.org/">OpenStreetMap</a>, ' +
            'under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
        });
        // Create a Basemap with the WebTileLayer. The thumbnailUrl will be used for
        // the image in the BasemapToggle widget.
        var stamen = new Basemap({
          baseLayers: [mapBaseLayer],
          title: "Terrain",
          id: "terrain",
          thumbnailUrl:
            "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png"
        });

        var map = new Map({
          basemap: "satellite",
          ground: "world-elevation"
        });

        var initCamera = {
          heading: 124.7,
          tilt: 82.9,
          position: {
            latitude: 40.713906,
            longitude: -111.848111,
            z: 1990
          }
        };

        var view = new SceneView({
          container: "viewDiv",
          map: map,
          camera: initCamera
        });

        view.when(function () {
          // Add a basemap toggle widget to toggle between basemaps
          var toggle = new BasemapToggle({
            visibleElements: {
              title: true
            },
            view: view,
            nextBasemap: stamen
          });

          // Add widget to the top right corner of the view
          view.ui.add(toggle, "top-right");
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
